<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        #cas{
            display: block;
            border:1px solid;
            margin:auto;
        }
    </style>
    <script>
        window.onload = function(){
            canvas = document.getElementById("cas");
            context = canvas.getContext('2d');
            var sw = new stopWatch(canvas.width/2,canvas.height/2 , 150 , -0.5*Math.PI);
            sw.drawWatch();
            document.getElementById("startBtn").onclick = function(){
                var time;
                try{
                    time = parseInt(document.getElementById('time').value);
                }
                catch(err){
                    alert("格式错误");
                    return;
                }
                sw.angle = Math.PI * time/30 - 0.5*Math.PI;
                sw.running = true;
                sw.drawWatch();
                sw.elapsed = 0;
                sw.start();
                animate();
                function animate(){
                    if(sw.isRunning() && sw.getElapsedTime() <= time*1000){
                        var t = sw.getElapsedTime();
                        sw.angle =Math.PI * time/30 - (Math.PI * t/30000) - 0.5*Math.PI;
                        sw.drawWatch();
                        requestAnimationFrame(animate);
                    }
                }
            }
        }

        function drawCircle(centerX , centerY , radius , fillStyle , strokeStyle){
            context.save();
            context.beginPath();
            context.arc(centerX , centerY , radius , 0 , 2*Math.PI);
            context.fillStyle = fillStyle;
            context.strokeStyle = strokeStyle;
            context.stroke();
            context.fill();
            context.restore();
        }

        function drawNum(centerX , centerY , radius){
            context.beginPath();
            context.textAlign = "center";
            context.textBaseline = "middle";
            var angle = 0;
            for(var i=0;i<12;i++){
                var newradius = radius-8;
                context.moveTo(centerX + radius* Math.cos(angle) , centerY + radius* Math.sin(angle));
                context.lineTo(centerX + newradius* Math.cos(angle) , centerY + newradius* Math.sin(angle));
                var text = i*5+15 >= 60? i*5-45 : i*5+15;
                context.fillText(text, centerX + (radius+40)* Math.cos(angle) , centerY + (radius+40)* Math.sin(angle))
                angle += Math.PI/30;
                for(var j=0;j<4;j++){
                    newradius = radius-3;
                    context.moveTo(centerX + radius* Math.cos(angle) , centerY + radius* Math.sin(angle));
                    context.lineTo(centerX + newradius* Math.cos(angle) , centerY + newradius* Math.sin(angle));
                    angle += Math.PI/30;
                }
            }
            context.stroke();
        }

        function drawPoint(centerX , centerY , radius , angle){
            context.beginPath();
            context.moveTo(centerX,centerY);
            context.lineTo(centerX + radius* Math.cos(angle) , centerY + radius* Math.sin(angle));
            context.stroke();
            drawCircle(centerX,centerY,10,"#ccc");
            drawCircle(centerX + radius* Math.cos(angle),centerY + radius* Math.sin(angle),5,"#ccc");
        }

        var stopWatch = function(centerX , centerY , radius , angle){
            this.x = centerX;
            this.y = centerY;
            this.radius = radius;
            this.angle = angle;
        }

        stopWatch.prototype = {
            startTime:0,
            running:false,
            elapsed:0,
            drawWatch:function(){
                context.clearRect(0,0,canvas.width , canvas.height);
                drawCircle(this.x , this.y , this.radius , "#ccc");
                drawCircle(this.x , this.y , this.radius-20 , "#FFF");
                drawNum(this.x , this.y , this.radius-20);
                drawPoint(this.x , this.y , (this.radius-10) , this.angle);
            },
            start:function(){
                this.startTime = +new Date();
                this.running = true;
            },
            stop:function(){
                this.elapsed = (+new Date()) - this.startTime;
                this.running = false;
            },
            isRunning:function(){
                return this.running;
            },
            getElapsedTime:function(){
                if(this.running){
                    return (+new Date()) - this.startTime;
                }
                else {
                    return this.elapsed;
                }
            }
        }

        window.requestNextAnimationFrame = (function(){
            return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || function(callback , element){
                var self = this,start,finish;
                window.setTimeout(function(){
                    start = +new Date();
                    callback(start);
                    finish = +new Date();
                    self.timeout = 1000/60 - (finish - start)
                } , self.timeout)
            }
        });
    </script>
    <title>秒表</title>
</head>
<body>
<div >
    <canvas id='cas' width="500" height="500">浏览器不支持canvas</canvas>
    <div style="width:100px;margin:10px auto">
        <input type="text" name="" id="time" style="width:40px;" value="50"><button id="startBtn">开始</button>
    </div>
</div>
</body>
</html>